<!-- 万里汇叫Novalink星汇卡管理 -->
/**
 * NK卡
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>Novalink星汇卡</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock"> 
      <div class=""> 
           <!-- 搜索筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search"> 
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="请输入用户ID" 
                type="number"
                clearable
              ></el-input>
            </el-form-item> 
            <el-form-item label="">
              <el-input
                size="small"
                v-model="formInline.transferType"
                placeholder="输入卡号后四位"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-select
                size="small"
                v-model="formInline.type"
                placeholder="请选择转账类型"
                clearable
              >
                <el-option
                  v-for="type in typeData"
                  :label="type.key"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-date-picker
                v-model="value1"
                size="small"
                type="datetimerange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="createdData"
              >
              </el-date-picker>
            </el-form-item> 

            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
              >
                搜索
              </el-button>
            </el-form-item> 
          </el-form> 
      </div>  
    <!--列表-->
    <div class="ra_box"> 
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%" 
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="userId"
          label="用户ID"
          show-overflow-tooltip
          width="80"
        >
        </el-table-column>
        <el-table-column prop="budgetAccountId" label="卡号"  width="165" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{ scope.row.budgetAccountId }}  <i class="el-icon-document-copy copyBtn"   @click="copyText(scope.row.budgetAccountId)"></i></div>
            </template>
          </el-table-column> 
          <!-- <el-table-column
            prop="userId"
            label="使用者ID"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>  -->
        <el-table-column prop="transferType" label="转账类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{  scope.row.transferType=='transfer_in'?'转入':"转出" }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="transferAmount"
          label="转账金额"
          show-overflow-tooltip
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="currency"
          label="转账币种"
          show-overflow-tooltip
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="createBy"
          label="操作人"
          show-overflow-tooltip
          width="90"
        >
        </el-table-column>
       
        <el-table-column
          prop="createTime"
          label="操作时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.createdAt, 8 * 60 * 60) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
      </el-table-column> 
      <el-table-column align="center" label="操作" width="360">
          <template slot-scope="scope">  
            <el-button size="mini"   plain  @click="changCard(scope.row)">
              查看
            </el-button>  
            <el-button
              type="warning" plain  size="mini" 
              @click="isfreezeEdit('冻结', 'freeze', scope.row)"
              :disabled="scope.row.cardStatus != 'normal'"
              style="color: #f74e4e; cursor: pointer;"
            >
              冻结
            </el-button>
            <el-button
              type="success" plain  size="mini" 
              @click="isfreezeEdit('解冻', 'unfreeze', scope.row)"
              :disabled="scope.row.cardStatus != 'frozen'"
              style="color: #67C23A; cursor: pointer;"
            >
              解冻
            </el-button>
            <el-button
                plain 
                size="mini" type="primary"  
              @click="updateCard(scope.row.cardId)"
              style="color: #fff;"
            >
              更新
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div> 

    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" @refresh="getdata(formInline)"></codeChoose>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  timestampSubTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
  reqJson
} from "../../api/axiosFun";
 
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false,
      cardInfo: "",
      disabled: false,
      addFormVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      iDList: { cardId: [], userId: [] },
      typeData: [
        { key: "转入", value: 'transfer_in' },
        { key: "转出", value: 'transfer_out' }, 
      ],
      cardData: [
        { key: "可用", value: "normal" },
        { key: "待转入", value: "pending_recharge" },
        { key: "未激活", value: "unactivated" },
        { key: "冻结中", value: "freezing" },
        { key: "冻结", value: "frozen" },
        { key: "风控冻结", value: "risk_frozen" },
        { key: "系统冻结", value: "system_frozen" },
        { key: "解冻中", value: "unfreezing" },
        { key: "过期", value: "expired" },
        { key: "销卡中", value: "canceling" },
        { key: "销卡", value: "cancelled" },
      ],
      cardTypeData: {
        normal: "可用",
        pending_recharge: "待转入",
        unactivated: "未激活",
        freezing: "冻结中",
        frozen: "冻结",
        risk_frozen: "风控冻结",
        system_frozen: "系统冻结",
        unfreezing: "解冻中",
        expired: "过期",
        canceling: "销卡中",
        cancelled: "销卡",
      },
      addForm: {},
      CVV: "",
      value1: "",
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardNo: "",
        cardStatus: "",
        userId: "",
        createdAtStart: "",
        createdAtEnd: "",
      },
      listData: "",
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission:false,
      userInfo:{},
      headers:'',
      verArry:[],
      verType:'',
      curItem:'', 
      totalStatus:'',
      cvvShow:true,

      userIDList:[],
      cardVisible:false

    };
  },
  // 注册组件
  components: {
    Pagination,
    codeChoose
  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal); 
    },
  }, 
  created() {
    this.getdata(this.formInline);
    this.cvv=null
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user); 
      if(this.userInfo&&this.userInfo.verifyApi){
        this.verArry =  this.userInfo.verifyApi.split(',');
      }  
    }  
   

  },
  methods: { 
    getParam(val,type){ 
      this.headers = val 
      if(type=="freezeCard" || type=="unFreezeCard"){  
        this.editFreezeCard();
      }else if(type=="freezeCards" || type=="unFreezeCards"){
        this.editIsfreezeEdits();
      }else if(type=='cvv'){
        this.getCvv(this.curItem);
      }
    }, 
    exportEx() { 
      let url = getUrl(this.formInline);
      service
        .post("/api/admin/exportBudgetTransferRecordList" + url, {})
        .then((res) => {
          this.loading = false; 
          if (res.code == 0) {
            window.open(
              baseURL + "/common/download?fileName=" + res.msg,
              "_blank"
            );
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    createdData() {
      if (this.value1) {
        this.formInline.createdAtStart = timestampSubTime(
          this.value1[0]
        );
        this.formInline.createdAtEnd = timestampSubTime(
          this.value1[1]
        );
      } else {
        this.formInline.createdAtStart = "";
        this.formInline.createdAtEnd = "";
      }
    },
    getdata(parameter) {
      let url = getUrl(parameter); 
      service
        .get("/api/admin/getBudgetTransferRecordList" + url, {})  
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    changCard(row) {
      this.addFormVisible = true;
      this.addForm = row;
      // this.getCvv(row);
    },   
    copyText(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
  },
};
</script>

<style scoped>
/* .el-form-item {
  display: inline-block;
  margin-left: 2%;
} */
.user-search {
  margin-top: 20px;
}
.select10 .el-select {
  width: 100%;
}
/deep/ .el-table__body .hidden-row {
  display: none !important;
}

/deep/ .radio_box .el-radio-button .el-radio-button__inner {
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

/deep/ .radio_box .el-radio-button.is-active .el-radio-button__inner {
  box-shadow: 0px 0 0 0 #409eff;
}
.copyBtn:hover{
  color: #409eff;
  cursor: pointer;
}
</style>

 
 